<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 喝水记录小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="iphone-frame">
        <div class="status-bar">
            <div>9:41</div>
            <div>
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-1"></i>
                <i class="fas fa-battery-full ml-1"></i>
            </div>
        </div>
        
        <div class="content">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold">我的</h1>
                <button class="bg-gray-100 p-2 rounded-full">
                    <i class="fas fa-cog text-gray-500"></i>
                </button>
            </div>
            
            <div class="card">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="用户头像" class="avatar mr-4">
                    <div>
                        <div class="text-xl font-bold">张三</div>
                        <div class="text-sm text-gray-500">连续打卡 5 天</div>
                    </div>
                </div>
                
                <div class="grid grid-cols-3 gap-4 mt-6">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-blue-500">1900ml</div>
                        <div class="text-xs text-gray-500">今日饮水</div>
                    </div>
                    
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-500">95%</div>
                        <div class="text-xs text-gray-500">完成率</div>
                    </div>
                    
                    <div class="text-center">
                        <div class="text-2xl font-bold text-purple-500">8</div>
                        <div class="text-xs text-gray-500">好友数</div>
                    </div>
                </div>
            </div>
            
            <div class="card mt-6">
                <h2 class="text-xl font-semibold mb-4">个人信息</h2>
                
                <div class="list-item">
                    <div class="font-medium">性别</div>
                    <div class="text-gray-500">男</div>
                </div>
                
                <div class="list-item">
                    <div class="font-medium">年龄</div>
                    <div class="text-gray-500">28岁</div>
                </div>
                
                <div class="list-item">
                    <div class="font-medium">体重</div>
                    <div class="text-gray-500">70kg</div>
                </div>
                
                <div class="list-item">
                    <div class="font-medium">活动量</div>
                    <div class="text-gray-500">中度活动</div>
                </div>
                
                <div class="list-item">
                    <div class="font-medium">每日目标</div>
                    <div class="text-gray-500">2000ml</div>
                </div>
                
                <button class="secondary-button mt-4">
                    <i class="fas fa-pen mr-2"></i> 编辑信息
                </button>
            </div>
            
            <div class="card mt-6">
                <h2 class="text-xl font-semibold mb-4">功能</h2>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="bg-blue-100 p-2 rounded-full mr-3">
                            <i class="fas fa-bell text-blue-500"></i>
                        </div>
                        <div>提醒设置</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="bg-purple-100 p-2 rounded-full mr-3">
                            <i class="fas fa-share-alt text-purple-500"></i>
                        </div>
                        <div>分享应用</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="bg-green-100 p-2 rounded-full mr-3">
                            <i class="fas fa-question-circle text-green-500"></i>
                        </div>
                        <div>帮助与反馈</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
                
                <div class="list-item">
                    <div class="flex items-center">
                        <div class="bg-red-100 p-2 rounded-full mr-3">
                            <i class="fas fa-heart text-red-500"></i>
                        </div>
                        <div>关于我们</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
        
        <div class="tab-bar">
            <div class="tab-item">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>记录</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line tab-icon"></i>
                <span>统计</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-users tab-icon"></i>
                <span>社交</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html>